<template>
	<view class="container">
		<!-- 左上角队徽 -->
		<view class="logo-container">
			<image src="../../static/teamEmblem1.png" class="team-logo"></image>
		</view>

		<!-- 上方欢迎文字 -->
		<view class="welcome-text">
			<span class="special-text">用户注册</span>
		</view>

		<!-- 输入框区域 -->
		<view class="input-container">
			<!-- 用户名输入 -->
			<view class="input-group">
				<view class="input-label">用户名：</view>
				<input type="text" v-model="username" class="text-input" placeholder="请输入用户名" />
			</view>

			<!-- 密码输入 -->
			<view class="input-group">
				<view class="input-label">密码：</view>
				<input type="password" v-model="password" class="text-input" placeholder="请输入密码" />
			</view>


			<!-- 注册按钮 -->
			<button class="register-button" @click="register">立即注册</button>

			<!-- 错误提示 -->
			<view v-if="errorMsg" class="error-message">{{ errorMsg }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"

	// 导入uni-id-co对象
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		errorOptions: {
			type: 'toast'
		}
	})

	// 定义响应式变量
	const username = ref('')
	const password = ref('')
	const captchaSrc = ref('')
	const errorMsg = ref('')

	onLoad(() => {
		document.title = '用户注册';
	})

	// 刷新验证码


	// 注册函数
	async function register() {
		// 表单验证
		if (!username.value) {
			errorMsg.value = '请输入用户名'
			return
		}
		if (!password.value) {
			errorMsg.value = '请输入密码'
			return
		}


		// 重置错误信息
		errorMsg.value = ''

		try {
			// 调用注册接口
			const res = await uniIdCo.registerUser({
				username: username.value,
				password: password.value,
				role: ["USER"],
			})

			console.log('注册结果:', res)

			// 注册成功
			if (res.errCode === 0) {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				// 注册成功后跳转到登录页面
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 1500)
			} else {
				// 注册失败
				errorMsg.value = res.errMsg || '注册失败，请重试'
				// 刷新验证码
			}
		} catch (error) {
			console.error('注册异常:', error)
			errorMsg.value = `注册异常：${error.message || error.errMsg || String(error)}，请重试`
			// 刷新验证码
		}
	}
</script>

<style lang="scss" scoped>
	/* 导入特殊字体 */
	@font-face {
		font-family: 'BoutiqueBitmap9x9_3D';
		src: url("../../static/font/BoutiqueBitmap9x9_3D.woff"),
			url("../../static/font/BoutiqueBitmap9x9_3D.woff2")
	}

	@font-face {
		font-family: 'BoutiqueBitmap9x9_19_R';
		src: url("../../static/font/BoutiqueBitmap9x9_19_R.woff"),
			url("../../static/font/BoutiqueBitmap9x9_19_R.woff2")
	}

	.container {
		width: 100%;
		height: 100vh;
		background-image: url('../../static/background.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
	}

	/* 左上角队徽 */
	.logo-container {
		position: absolute;
		left: 20px;
		top: 20px;
	}

	.team-logo {
		width: 200px;
		height: 200px;
		border-radius: 10px;
	}

	/* 欢迎文字 */
	.welcome-text {
		margin-top: 35px;
	}

	.special-text {
		font-family: 'BoutiqueBitmap9x9_3D', 'Microsoft YaHei', sans-serif;
		font-size: 60px;
		color: #006080;
	}

	/* 输入框容器 */
	.input-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100px;
		width: 90%;
		max-width: 800px;
		gap: 20px;
	}

	/* 输入组 */
	.input-group {
		background-color: rgba(255, 255, 255, 0.85);
		display: flex;
		align-items: center;
		width: 100%;
		gap: 10px;
		padding: 10px;
		border-radius: 10px;
	}

	.input-label {
		margin-left: 10px;
		font-family: "BoutiqueBitmap9x9_19_R", 'Microsoft YaHei', sans-serif;
		font-size: 28px;
		color: #459fc9;
		white-space: nowrap;
	}

	.text-input {
		flex: 1;
		height: 60px;
		font-size: 28px;
		outline: none;
		background-color: transparent;
		border: none;
	}

	/* 验证码特殊样式 */
	.captcha-group {
		position: relative;
	}

	.captcha-input {
		padding-right: 140px;
	}

	.captcha-image {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 120px;
		height: 50px;
		border-radius: 5px;
	}

	/* 注册按钮 */
	.register-button {
		width: 100%;
		height: 80px;
		background-color: #006080;
		color: white;
		font-size: 32px;
		font-family: "BoutiqueBitmap9x9_19_R", 'Microsoft YaHei', sans-serif;
		border: none;
		border-radius: 10px;
		margin-top: 20px;
	}

	/* 错误提示 */
	.error-message {
		color: #ff4d4f;
		font-size: 24px;
		margin-top: 10px;
	}

	/* 确保页面边缘没有边距 */
	page {
		margin: 0;
		padding: 0;
	}
</style>